{% extends "school/layout.html" %}

{% set page_title = translate('班级管理') %}

{% block content %}
<style>
    .f-radio ul{
        position: relative;
        padding-top: 14px;
    }
    .f-radio ul:after{
        content: '';
        display: block;
        clear: both;
    }
    .name_tip{
        display: inline-block;
        color: red;
    }
    .f-radio ul li{
        float: left;
        padding-right: 20px;
    }
    .norequired{
        margin: 8px 8px 0 2px;
    }
</style>
<div class="m-content">
<fieldset class="fieldset">
    <legend>{{translate('新建班级')}}</legend>
    <form class="form-horizontal" method="POST" id="{{ form.__class__.__name__ }}">
        {{ form.hidden_tag() }}
        <div class="form-group">
            <label class="control-label">{{ form.name.label(class_="norequired") }}:</label>
            {{ form.name(class_="form-control", required=True) }}
            {% if form.name.errors %}
            <div class="error">{{ form.name.errors[0] }}</div>
            {% endif %}
        </div>

        <div class="form-group">
            <label class="control-label">{{ form.teacher.label(class_="norequired") }}:</label>
            <select name="teacher" class="form-control" required>
                {% for option in form.teacher %}
                    {{ option }}
                {% endfor %}
            </select>
        </div>

        <div class="form-group">
            <label class="control-label">{{ form.classroom.label(class_="norequired") }}:</label>
            <select name="classroom" class="form-control" required>
                {% for option in form.classroom %}
                    {{ option }}
                {% endfor %}
            </select>
        </div>

        <div class="form-group f-radio" id="lesson_type_form">
            <label class="control-label"><label class="norequired" for="course_type">{{translate('课程类型')}}</label>:</label>
            <ul id="course_type" style="width: auto;">
            </ul>
        </div>

        <div class="form-group f-radio">
            <label class="control-label">{{ form.name_type.label(class_="norequired") }}:</label>
            {{ form.name_type }}
        </div>

        <div class="form-group">
            <label class="control-label" for="studentNotVerified"><label style="margin-top:-6px;" class="norequired">{{translate('未分配学生')}}</label>:</label>
                <div class="m-studentlist-con" id="m-studentlist-con">

                </div>
            {% if form.students_not_verified.errors %}
            <div class="error">{{ form.students_not_verified.errors[0] }}</div>
            {% endif %}
        </div>

        <div>
            <button class="btn btn-primary" id="done">{{translate('完成')}}</button>
        </div>
    </form>
</fieldset>
</div>
{% endblock %}
{% block js %}
<script type="text/javascript">
    var is_selected_type = false,
        is_selected_course = false;
    var course_type_radio = {
                                course_children:'<li><input id="course_type-0" name="course_type" type="radio" value="course_children"> <label for="course_type-0">{{translate("儿童课程")}}</label></li>',
                                course_adults:'<li><input id="course_type-1" name="course_type" type="radio" value="course_adults"> <label for="course_type-1">{{translate("流行经典")}}</label></li>',
                                course_xi_yang_hong:'<li><input id="course_type-2" name="course_type" type="radio" value="course_xi_yang_hong"> <label for="course_type-2">{{translate("怀旧金曲")}}</label></li>'
                            };
    var default_course_type = '<li><input id="course_type-0" name="course_type" type="radio" checked value="course_children"> <label for="course_type-0">{{translate("儿童课程")}}</label></li>'

    function showCourse(array,lang){
        if(lang == 'lang=en'){
            $('#course_type').empty().append(default_course_type);
            return;
        }
        if(array.length == 0){
            $('#course_type').empty().append('{{translate("所选教室未开通任何课程，请更换教室或购买课程")}}');
        }else{
            $('#course_type').empty();
            for(var i = 0; i < array.length; i++){
                $('#course_type').append(course_type_radio[array[i][0]]);
            }
        }
    }
    function getStudents(){
        var finArr = [];
        $.ajax({
            type: 'get',
            url: '/school/classes/get_music_class_stu_info',
            cache: false,
            async: false,
            success: function(data){
                var d = JSON.parse(data);
                for(var i in d){
                    var is_ver = d[i].is_verified ? 'students_has_verified' : 'students_not_verified';
                    var course_type = d[i].course_type ? d[i].course_type : 'course_children';
                    var temp = '<div class="m-studentlist-item"><input name="'+is_ver+'" data-stulist="stulist" data-coursetype="'+course_type+'" type="checkbox" value="'+d[i].id+'" disabled="disabled"><label class="norequired">'+d[i].name+'</label></div>';
                    finArr.push(temp);
                }
            }
        });
        return finArr;
    }
    function renderList($con,arr){
        if(arr.length>0){
            for(var i in arr){
                $con.append(arr[i]);
            }
        }else{
            $con.append('<span>{{translate("暂无可分配学生")}}</span>')
        }
    }
    function studentFilter(course_type,is_ver){
        var courseStudent = $('input[data-coursetype="'+course_type+'"]') || [],
            verifyStudent = is_ver == 'students_has_verified' ? $('input[name="'+is_ver+'"]'):$('input[data-stulist="stulist"]'),
            finArr = [];

        if(courseStudent.length>0 && verifyStudent.length>0){
            for(var i = 0; i <  courseStudent.length; i++){
                if($.inArray(courseStudent[i], verifyStudent)!=-1){
                    finArr.push(courseStudent[i]);
                }
            }
        }else{
            return [];
        }
        return finArr;
    }
    $(function(){
        var labels = $('#MusicClassForm').find('label.control-label');
        var cid = $('select[name="classroom"]')[0].value;
        var lesson_type_form = $('#lesson_type_form');
        var studentCon = $('#m-studentlist-con');
        var selectedCourse = '',
            selectedVerify = '';

        renderList(studentCon,getStudents());

        var studentList = $('input[data-stulist="stulist"]');

        if(localStorage.lang == 'lang=en'){//Oversea version Shield
            lesson_type_form.css('display','none');
            is_selected_course = true;
            selectedCourse = 'course_children';
        }

        for(var i = 0; i < labels.length; i++){
            if(labels[i].htmlFor!=='studentNotVerified'){
                $(labels[i]).prepend('<span class="dot-tips">*</span>')
            }
        }

        $.post('/school/classrooms/'+cid+'/courses',function(data){
            var d = JSON.parse(data);
            showCourse(d,localStorage.lang);
        })

        $('select[name="classroom"]').change(function(){
            if(localStorage.lang !== 'lang=en'){//Oversea version Shield
                is_selected_course = false;
            }
            var class_id = this.value;
            $.post('/school/classrooms/'+class_id+'/courses',function(data){
                var d = JSON.parse(data);
                showCourse(d,localStorage.lang);
            })
        });

        if($('input[name="name_type"]:checked').length>0){
            if(!is_selected_type){
                is_selected_type = true;
                $('#name_type').append('<p class="name_tip">{{translate("*班级类型一旦选择不可更改")}}</p>');
            }
            selectedVerify = $('input[name="name_type"]:checked')[0].value == 'exp_class'?'students_not_verified':'students_has_verified';
            for(var i = 0; i < studentList.length; i++){
                studentList[i].checked = false;
                studentList[i].disabled = true;
            }
            if(selectedCourse != ''){
                var avilableStudents = studentFilter(selectedCourse,selectedVerify);
                for(var i in avilableStudents){
                    avilableStudents[i].removeAttribute('disabled');
                }
            }
        }

        $('input[name="name_type"]').change(function(){
            if(!is_selected_type){
                is_selected_type = true;
                $('#name_type').append('<p class="name_tip">{{translate("*班级类型一旦选择不可更改")}}</p>');
            }
            selectedVerify = this.value == 'exp_class'?'students_not_verified':'students_has_verified';
            for(var i = 0; i < studentList.length; i++){
                studentList[i].checked = false;
                studentList[i].disabled = true;
            }
            if(selectedCourse != ''){
                var avilableStudents = studentFilter(selectedCourse,selectedVerify);
                for(var j in avilableStudents){
                    avilableStudents[j].removeAttribute('disabled');
                }
            }
        })

        $('#course_type').click(function(e){
            if($('input[name="course_type"]:checked').length>0){
                if(!is_selected_course){
                    is_selected_course = true;
                    if($('.name_tip').length<=0){
                        $('#course_type').after('<p class="name_tip">{{translate("*课程类型一旦选择不可更改")}}</p>');
                    }
                }
                selectedCourse = $('input[name="course_type"]:checked').val();
                for(var i = 0; i < studentList.length; i++){
                    studentList[i].checked = false;
                    studentList[i].disabled = true;
                }
                if(selectedVerify != ''){
                    var avilableStudents = studentFilter(selectedCourse,selectedVerify);
                    for(var j = 0; j < avilableStudents.length; j++){
                        avilableStudents[j].removeAttribute('disabled');
                    }
                }
            }
        });

        $('#return').bind('click', function(e){
            e.preventDefault();
            window.location.href = "{{ url_for('school.list_classes') }}";
        });

        $('#done').click(function(e){
            if(!is_selected_course){
                e.preventDefault();
                kalert('{{translate("请选择课程类型")}}</br></br>{{translate("若所选教室未开通任何课程，请更换教室或购买课程")}}')
            }else if(!is_selected_type){
                e.preventDefault();
                kalert('{{translate("请选择班级类型")}}')
            }
        })
    });
</script>
{% endblock %}
